<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 第一步引入 d3 -->
    <script src="js/d3-5.16.0/d3.min.js"></script>
    <!-- 第二步引入 d3 流程图插件 -->
    <script src="js/dagre-d3-custom.js"></script>
    <!-- 第二步引入 d3 家族树插件 -->
    <script src="js/d3-familytree.js"></script>

    <style>

        .ft-div {
            width: 95vw;
            height: 95vh;
            background-color: #C0C0C033;
            margin: auto;
            top: 0;
            left: 0;
        }

        /* 默认节点效果 */
        .node rect, .node circle {
            stroke: #C0C0C0;
            fill: #ffffff;
            stroke-width: 2px;
        }

        /* 默认节点文字效果 */
        .node text {
            font-weight: bold;
        }

        /* 当前选中的节点 */
        .selectedNode rect, .selectedNode circle {
            stroke: #FF9D73;
            fill: #FF0000;
            stroke-width: 5px;

            animation: borderColor 1s infinite;
            box-sizing: border-box;
        }

        @keyframes borderColor {
            0% {
                stroke-width: 2px;
            }
            50% {
                stroke-width: 10px;
            }
            100% {
                stroke-width: 2px;
            }
        }

        /* 当前选中节点的孩子 */
        .childrenNode rect, .childrenNode circle {
            stroke: #3E97D1;
            fill: #0A67A3;
            stroke-width: 2px;
        }

        /* 当前选中节点的父母 */
        .parentNode rect, .parentNode circle {
            stroke: #FFAA40;
            fill: #FF8E00;
            stroke-width: 2px;
        }

        /* 当前选中节点的祖父母 */
        .grandparentNode rect, .grandparentNode circle {
            stroke: #FFEE40;
            fill: #FFE800;
            stroke-width: 2px;
        }

        /* 当前选中节点的兄妹 */
        .siblingsNode rect, .siblingsNode circle {
            stroke: #39E639;
            fill: #00CC00;
            stroke-width: 2px;
        }

        /* 当前选中节点的兄妹(同父同母) */
        .sameParentNode rect, .sameParentNode circle {
            stroke: #39E639;
            fill: #008500;
            stroke-width: 2px;
        }

        /* 关系普通效果 */
        .edgePath path {
            stroke: #C0C0C0dd;
            stroke-width: 1px;
        }

        /* 直接关系 */
        .directRelation path {
            stroke: #ff0000;
            stroke-width: 5px;
        }

        /* 影藏箭头效果 */
        .hideArrowhead {
            visibility: hidden;
        }

        /* 左侧统计的文字信息 */
        .stat text {
            font-size: 20px;
            font-weight: bold;
        }

    </style>
</head>
<body>

<!--创建一个空元素，装载家族树 （该元素需要具备宽高）-->
<div class="ft-div"></div>
</body>

<script>

    d3.json("data/data01.json").then(data => {

        let tree = d3.familytree({
            container: ".ft-div",
            data: data,
            defaultSelect: "8153bd2fbdc64860a9878adc58b42af2",
            // nodeSize: 20,
            // nodeSep: 80,
            events: {
                onresume: function (data) {
                    console.log("图画好了，data:" + data)
                    // tree.select("1")
                },
                onclick: function (node) {
                    console.log("click event, node:" + JSON.stringify(node))
                },
                onmouseover: function (node) {
                    console.log("mouseover event, node:" + node)
                },
                onmouseout: function (node) {
                    console.log("mouseout event, node:" + node)
                },
                oncontextmenu: function (node) {
                    console.log("contextmenu event, node:" + node)
                }
            }
        })

        window.onresize = function () {
            tree.resize()
        }
    })

</script>

</html>